<template>
  <view class="container">
    <!-- Top banner with offer -->
    <view class="banner" >
      <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      	<swiper-item v-for="(item,index) in swiperItems" :key="index">
      	     <image class="swiper-image" :src='item.src'></image>
		</swiper-item>      	
      </swiper>
	  <!-- <view class="custom-indicator">
	        <view
	          v-for="(item, index) in swiperItems"
	          :key="index"
	          :class="['indicator-item', { 'active': current === index }]"
	        ></view>
	  </view> -->
    </view>
    <view class="body">
		<view class="tab-bar">
		  <view  class="tab-item" :class="{'active':tabChange===true}"  @click="tabChange=true">
			  <text id='jiudian'>酒店</text>
		  </view>
		  <view  class="tab-item" :class="{'active':tabChange===false}" @click="tabChange=false">
			  <text id='minsu'>民宿</text>
		  </view>
		  <view class="divider"></view>
		</view>
		
		<view v-if="tabChange===true" class="tab-button">
			<view class="date-picker">
			  <text class="nearBy">北京，朝阳区中国大厦附近</text>	
			  <image class="rightArrow1"  src="../../static/home/rightArrow.png"></image>
			  <text class="currentLoc">当前位置</text>
			  <image class="locationImg" @click="getCurrentLocation" src="../../static/home/当前位置.png"></image>
			</view>
			<view class="dates">
				<!-- 选择开始日期 -->
				<picker mode="date" @change="onStartDateChange">
				      <view class="picker">
				         <view class="jyjr">
							 <text class="month">{{ startDate.month }}</text>
							 <text class="yue">月</text>
							 <text class="day">{{ startDate.day }}</text>
							 <text class="ri">日</text>
						 </view>
				      </view>
				</picker>
				<text v-show="1" class="tian">今天</text>				
				<!-- 日期之间的显示 -->
				<view class="date-divider">
				  <view class="line">-</view>
				  <view class="label">
					<view class="digit-str">
						<text>1</text>
						<text class="wan">{{ labelText }}</text>
					</view>
				  </view>
				  <view class="line">-</view>
				</view>
				
				<!-- 选择结束日期，动态限制最早选择的日期 -->
				<picker mode="date" :start="startDate || '1970-01-01'" @change="onEndDateChange">
				  <view class="picker">
					 <view class="jyjr">
						 <text class="month month2">{{ endDate.month  }}</text>
						 <text class="yue yue2">月</text>
						 <text class="day day2">{{ endDate.day  }}</text>
						 <text class="ri ri2">日</text>
					 </view>
				  </view>
				</picker>
				<text v-show="1" class="tian">明天</text>			    
			    <image class="rightArrow2"  src="../../static/home/rightArrow.png"></image>
			</view>		
			<view class="searchButton">
				<button @click="search" class="btn-search">
					<text class="chaxun">查询</text>
				</button>
			</view>	
			<view class="hotStore">
				<navigator url="../../pages/foods/index">
					<image src='../../static/home/推荐门店.png' class="hotStore-left">推荐门店</image>
				</navigator>
				<text class="hotStore-right">门店名称</text>
			</view>		
			<!-- Services (Movie tickets, Flights, etc.) -->
			<view class="services">
			  <view class="service-item">
			    <image class="services-icon" src="../../static/home/movieTicket.png" />
			    <text class="services-text">特惠电影票</text>
			  </view>
			  <view class="service-item">
			    <image class="services-icon" src="../../static/home/airTicket.png" />
			    <text class="services-text">机票</text>
			  </view>
			  <view class="service-item">
			    <image class="services-icon" src="../../static/home/trainTicket.png" />
			    <text class="services-text">火车票</text>
			  </view>
			  <view class="service-item">
			    <image class="services-icon" src="../../static/home/trip.png" />
			    <text class="services-text">旅游</text>
			  </view>
			</view>
			<view class="localRecommend">
				<view class="lrHeader">
					<text class="lrHeaderLeft">当地推荐</text>
					<text class="lrHeaderRight">查看更多</text>
					<image class="lrHeaderLeftRightArrow3"  src="../../static/home/rightArrow.png"></image>
				</view>
				<view class="lrBody">
					<view class="lrBody-left">
						<image class="lrBody-leftImg" src="../../static/home/hotel4.png" ></image>					
					</view>
					<view class="lrBody-right">
						<view class="lrBody-right1">
							<text class="lrBody-right1-text">民俗名称</text>
						</view>
						<view class="lrBody-right2">
							<text class="lr2-1">标签一</text>
							<text class="lr2-2">标签二</text>
							<text class="lr2-3">游记(56130)</text>
						</view>
						<view class="lrBody-right3">
							<text class="lr3-1">距您0.3km</text>
							<text class="lr3-2">美团</text>
						    <text class="lr3-3">&dollar;</text>
							<text class="lr3-4">80.00</text>
							<text class="lr3-5">起</text>
						</view>
						<view class="lrBody-right4">
							<text class="lr4-1">5.0</text>
							<text class="lr4-2">分</text>
							<text class="lr4-3">5365人评价</text>
							<text class="lr4-4">佣金</text>
							<text class="lr4-5">&dollar;</text>
							<text class="lr4-6">26.32</text>
						</view>
						<view class="lrBody-right5">
							<text class="lr5-1">这是地址信息</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- Hotel List -->
			<view class="recommendations">
			  <view class="rec_cate">
				  <text class="cate_item"  v-for="(cate,index) in cates" :key="index" :class="{active:activeIndex===index}" @click="activeIndex=index">{{cate.name}}</text>
			  </view>		  
			  <view v-if="activeIndex===1" class="rec_hotels">
			    <view class="rec-item" v-for="hotel in hotels" :key="hotel.id">		      
				  <view class="items">
				  	<image :src="hotel.image" class="hotel-img" />
				    <text class="hotel-name">{{ hotel.desc }}</text>
				    <view class="bottom_profile">
						<image class="bt_img" :src="hotel.pic" mode=""></image>
						<text class="bt_text">{{hotel.peoplename}}</text>
						<image class="bt_mid_img" :src="hotel.sc_pic" mode=""></image>
						<text class="bt_sc_number">{{hotel.sc_count}}</text>
					</view>
				  </view>
			      <view class="hotel-info">
			        
			      </view>
			    </view>
			  </view>
			  <view v-else class=""></view>
			</view>
		</view>
		<view v-else-if="tabChange===false" class="">
			
		</view>
	</view>
    <!-- Hotel / Homestay Tab Bar -->
    
    <!-- Date Picker -->
    
  </view>
</template>

<script setup>
import {ref,onMounted} from 'vue'
const tabChange = ref(true)
const current=ref(0)
const startDate = ref({
	year:'',
	month:'',
	day:''
})
const endDate = ref({
	year:'',
	month:'',
	day:''
})
// const sts=ref(new Date(startDate.value.year+'-'+startDate.value.month+'-'+startDate.value.day))
// const eds=ref(new Date(endDate.value.year+'-'+endDate.value.month+'-'+endDate.value.day))
const jintian=ref(new Date())
const mingtian=ref((new Date()).getDate()+1)
const labelText = ref('晚')
const error=ref('')
let activeIndex=ref(0)
const swiperItems=ref([
        { src: '../../static/home/banner.png' },
        { src: '../../static/home/banner.png' },
        { src: '../../static/home/banner.png' }
      ])
const location=ref(null)
const cates=ref([{
	id:1,
	name:'民宿'
},
{
	id:2,
	name:'酒店'
},
{
	id:3,
	name:'旅馆'
},
{
	id:4,
	name:'青旅'
}])
const hotels=ref([{
	id:1,
	desc:'民宿名称1',
	image:'../../static/home/hotel1.png',
	price:80,
	peoplename:'陈先生',
	sc_count:5365,
	pic:'../../static/home/avatar.png',
	sc_pic:'../../static/home/未收藏.png'
},
{
	id:2,
	desc:'民宿名称2',
	image:'../../static/home/hotel2.png',
	price:80,
	peoplename:'李小姐',
	sc_count:8888,
	pic:'../../static/home/avatar.png',
	sc_pic:'../../static/home/未收藏.png'
}])
onMounted(() => {
  setDefaultDates()
})
function setDefaultDates() {
      const today = new Date();
      const tomorrow = new Date(today);
      tomorrow.setDate(today.getDate() + 1);
      // 格式化为 'yyyy-mm-dd' 
      
      startDate.value.year = today.getFullYear();
      startDate.value.month = today.getMonth() + 1;
	  startDate.value.day = today.getDate();
	  endDate.value.year = tomorrow.getFullYear();
      endDate.value.month = tomorrow.getMonth() + 1;
	  endDate.value.day = tomorrow.getDate();
}
function onStartDateChange(e) {
      const selectedDate = e.detail.value;	  
	  startDate.value.year = selectedDate.split('-')[0];
      startDate.value.month = selectedDate.split('-')[1][0]==0?selectedDate.split('-')[1][1]:selectedDate.split('-')[1];
      startDate.value.day = selectedDate.split('-')[2]; 
	  const starts=ref(new Date(startDate.value.year+'-'+startDate.value.month+'-'+startDate.value.day))
      
      // 如果已经选择了结束日期，检查日期合法性
      if (endDate.value && new Date(endDate.value.year+'-'+endDate.value.month+'-'+endDate.value.day) < starts.value) {        
        endDate.value.year = ''; // 清除无效的结束日期
		endDate.value.month = ''; // 清除无效的结束日期
		endDate.value.day = ''; // 清除无效的结束日期
      }
}
    
// 选择结束日期
function onEndDateChange(e) {
  const selectedDate = e.detail.value;
  const seles=ref(new Date(selectedDate))  
  if (startDate.value && seles.value <new Date(startDate.value.year+'-'+startDate.value.month+'-'+startDate.value.day) ) {
	
	endDate.value.year=''
	endDate.value.month=''
	endDate.value.day=''
	error.value = '结束日期不能早于开始日期';
  } else {
	endDate.value.year = selectedDate.split('-')[0];
	endDate.value.month = selectedDate.split('-')[1][0]==0?selectedDate.split('-')[1][1]:selectedDate.split('-')[1];
	endDate.value.day = selectedDate.split('-')[2];	
  }
}

// 提交预订
function search() {
  if (!startDate.value || !endDate.value) {
	error.value = '请先选择开始和结束日期';
	return;
  }
  if (eds.value < sts.value) {
	error.value = '结束日期不能早于开始日期';
	return;
  }
}



function onSwiperChange(e){
	current.value=e.detail.current
}
function getCurrentLocation(){
	uni.getLocation({
	    type: 'gcj02',
	    success(res) {	      
	      location.value = {
	        latitude: res.latitude,
	        longitude: res.longitude,
	        speed: res.speed,
	        accuracy: res.accuracy,
	      }
		  console.log(location)
	    },
	    fail(err) {
	      console.error('获取位置失败：', err);
	    }		
	  })
}

</script>



<style scoped lang='scss'>
.container { 
	
}
.banner {
  position: relative;
}
.banner-img {
  width: 100%;
  height: 300rpx;
}
.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}
.swiper {
  width: 100%;
  height: 200px;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

/* 自定义指示器的样式 */
.custom-indicator {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.indicator-item {
  width: 20px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 3px;
  transition: background-color 0.3s;
}

.indicator-item.active {
  background-color: #FF0000;
}
.body {
	background-color: #FFFFFF;
	border-radius: 50rpx 50rpx 50rpx 50rpx;	
}

.sub-text {
  font-size: 24rpx;
}
.locationImg {
  width: 36rpx;
  height: 36rpx;
}
.rightArrow1,.rightArrow2  {
  width: 52rpx;
  height: 52rpx;
}
.rightArrow1 {
  margin-left: 32rpx;  
}
.rightArrow2 {
	/* position:absolute; */
    margin-right: -50rpx;
}

.tab-bar {  
  display: flex;
  justify-content: space-between;
  align-items: center;
  position:relative;
  width: 750rpx;
  height: 80rpx;
  background: #F4F4F4;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.tab-item {
	justify-content: center;
	align-items: center;
	display:flex;
	position:relative;
	width: 330rpx;
	height: 80rpx;
	background: #eee;	
}
#jiudian {	
	position:absolute;
	width: 64rpx;
	height: 44rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #555555;
	line-height: 38rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
#minsu {
	position:absolute;
	width: 64rpx;
	height: 44rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #555555;
	line-height: 38rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.tab-item.active {  
  background-color: #FFFFFF;  
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 36rpx;
  color: #222222;
  line-height: 42rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  #jiudian {
  	position:absolute;
  	width: 72rpx;
  	height: 50rpx;
  	font-family: PingFang SC, PingFang SC;
  	font-weight: 600;
  	font-size: 36rpx;
  	color: #222222;
  	line-height: 42rpx;
  	text-align: center;
  	font-style: normal;
  	text-transform: none;
  };
  #minsu {
	  background-color: #FFFFFF;
	  width: 72rpx;
	  height: 50rpx;
	  font-family: PingFang SC, PingFang SC;
	  font-weight: 600;
	  font-size: 36rpx;
	  color: #222222;
	  line-height: 42rpx;
	  text-align: center;
	  font-style: normal;
	  text-transform: none;
  }
}
.tab-item.active::after {
	  content: '';
	  position: absolute;
	  bottom: 10px;
	  left: 35%;
	  width: 1%;
	  height: 8px;
	  background-image: linear-gradient(to right, transparent,red);
	  animation: underline1 0.1s forwards;
	  
}
@keyframes underline1 {
  from {
    width: 25%;
  }
  to {
    width: 26%;
  }
}

.divider {
  position: absolute;
  width: 0;
  height: 100%;
  border-left: 2px solid black;
  transform: rotate(20deg); /* 倾斜分割线 */
  top: 0;
  left: 50%;
  z-index: 2;
}
.tab-button {	
	position:relative;
	background-color: #FFFFFF;
	padding-top:-100rpx;
}
.nearBy {
	width: 384rpx;
	height: 44rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	font-size: 32rpx;
	color: #222222;
	line-height: 38rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.currentLoc {
	width: 96rpx;
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #555555;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}


.date-picker {
  display: flex;
  position:relative;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}
.dates {
  display: flex;
  position:relative;
  justify-content: space-between;
  align-items: center;
  width: 686rpx;
  height: 104rpx; 
}
.date {
  margin-right: 20rpx;
}
.jyjr {
	
}
.month {
	width: 24rpx;
	height: 56rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	font-size: 40rpx;
	color: #222222;
	line-height: 47rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	 
}
.yue {
	width: 26rpx;
	height: 36rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 26rpx;
	color: #222222;
	line-height: 30rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	
}
.day {
	width: 48rpx;
	height: 56rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	font-size: 40rpx;
	color: #222222;
	line-height: 47rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	
}
.ri {
	width: 26rpx;
	height: 36rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 26rpx;
	color: #222222;
	line-height: 30rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	padding-left:20rpx;
}
.tian {
	width: 48rpx;
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #888888;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.date-divider {
	width: 88rpx;
	height: 42rpx;
    display:flex;
	position:relative;
	
}
.label {
	width: 72rpx;
	height: 42rpx;
	position:absolute;
	
	border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
	border: 2rpx solid #222222;
	.digit-str {
		width: 34rpx;
		height: 34rpx;
		/* position:absolute; */
		justify-content: center;
		align-items:center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #222222;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		.wan {
			margin-left:-1rpx;
		}
	}
}


.searchButton {
	width: 686rpx;
	height: 136rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	padding-left:32rpx;
	display:flex;
	position:relative;
}

.btn-search {
  width: 686rpx;
  height: 88rpx;
  background: #E60012;
  border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
}
.chaxun {
	width: 64rpx;
	height: 44rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 38rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	position:absolute;
	margin-top: 22rpx;
	margin-left:-21rpx;
}
.hotStore {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding-left:24rpx;
}
.hotStore-left {
	width:126rpx;
	height:44rpx;
	padding-left:24rpx;
}
.hotStore-right {
	width: 448rpx;
	height: 40rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #222222;
	line-height: 33rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
    margin-top: 10rpx;
    padding-left:24rpx;
}
.services {
  display: flex;
  justify-content: space-around;
  align-items: space-around;
  margin-top: 20rpx;
  padding-left: 30rpx;
}
.service-item {
  display: flex;
  flex-direction: column; /* 上下排列 */
  justify-content: center;
  width: 188rpx;
  height: 178rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.services-icon {
  width: 80rpx;
  height: 80rpx;
  padding-left: 20rpx;
  
  
}
.services-text {
  width: 120rpx;
  height: 34rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #222222;
  line-height: 28rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;   
}
.localRecommend {
	width: 750rpx;
	height: 338rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.lrHeader {
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	width: 702rpx;
	height: 98rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.lrHeaderLeft {
	width: 144rpx;
	height: 50rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	font-size: 36rpx;
	color: #222222;
	line-height: 42rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.lrHeaderRight {
	width: 112rpx;
	height: 40rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #888888;
	line-height: 33rpx;
	text-align: right;
	font-style: normal;
	text-transform: none;
	padding-left:350rpx;
}
.lrHeaderLeftRightArrow3 {
	width:52rpx;
	height:52rpx;
}
.lrBody {
	padding-left:24rpx;
	width:702rpx;
	height:240rpx;
}
.lrBody-leftImg {
	width:176rpx;
	height:240rpx;
}
.lrBody-right {
	width: 510rpx;
	height: 238rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	padding-left: 220rpx;
	margin-top: -250rpx;
}
.lrBody-right1-text {
	width: 510rpx;
	height: 44rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #222222;
	line-height: 38rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.lr2-1,.lr2-2 {
	width: 72rpx;
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #E60012;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	border: 0.5rpx solid red;      /* 设置实体边框的颜色和宽度 */
	border-radius: 5rpx;
}
.lr2-2 {
	margin-left: 10rpx;
}
.lr2-3 {
	width: 132rpx;
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #1989FF;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	padding-left:190rpx;
}
.lr3-1 {
	width: 510rpx;
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #888888;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.lr3-2 {
	width: 48rpx;
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #FF2E00;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	padding-left:175rpx;
	position:relative;
	top:20rpx;	
}
.lr3-3 {
	width: 28rpx;
	height: 34rpx;
	font-family: DIN, DIN;
	font-weight: 500;
	font-size: 28rpx;
	color: #FF2E00;
	line-height: 33rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	position:relative;
	top:20rpx;	
}
.lr3-4 {
	width: 90rpx;
	height: 44rpx;
	font-family: DIN, DIN;
	font-weight: bold;
	font-size: 36rpx;
	color: #FF2E00;
	line-height: 42rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	position:relative;
	top:20rpx;	
}
.lr3-5 {
	
	width: 24rpx;
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #FF2E00;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	position:relative;
	top:20rpx;	
}
.lrBody-right4 {
	margin-top:20rpx;
}
.lr4-1 {
	width: 44rpx;
	height: 40rpx;
	font-family: DIN, DIN;
	font-weight: bold;
	font-size: 32rpx;
	color: #222222;
	line-height: 38rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	position:relative;
	top:20rpx;
}
.lr4-2 {
	width: 20rpx;
	height: 24rpx;
	font-family: DIN, DIN;
	font-weight: 500;
	font-size: 20rpx;
	color: #222222;
	line-height: 23rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	position:relative;
	top:20rpx;
}
.lr4-3 {
	width: 130rpx;
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #888888;
	line-height: 28rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	padding-left:20rpx;
	position:relative;
	top:20rpx;
}
.lr4-4 {
	width: 40rpx;
	height: 28rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 20rpx;
	color: #222222;
	line-height: 23rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	padding-left:100rpx;
}
.lr4-5 {
	width: 20rpx;
	height: 24rpx;
	font-family: DIN, DIN;
	font-weight: 500;
	font-size: 20rpx;
	color: #222222;
	line-height: 23rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.lr4-6 {
	width: 80rpx;
	height: 40rpx;
	font-family: DIN, DIN;
	font-weight: bold;
	font-size: 32rpx;
	color: #222222;
	line-height: 38rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.lr5-1 {
	position:relative;
	top:20rpx;
	width: 510rpx;
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #222222;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}


.rec_cate {
	display:flex;
	justify-content: space-between;
	width: 750rpx;
	height: 98rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.cate_item {
	width: 128rpx;
	height: 44rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #555555;
	line-height: 38rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	transition: background-color 0.3s ease;
	cursor: pointer;
	position: relative;
}
.cate_item.active {
	width: 128rpx;
	height: 50rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	font-size: 36rpx;
	color: #222222;
	line-height: 42rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;	
}
.cate_item.active::after {
	  content: '';
	  position: absolute;
	  bottom: 2px;
	  left: 25%;
	  width: 50%;
	  height: 8px;
	  background-image: linear-gradient(to right, transparent,red);
	  animation: underline 0.1s forwards;
}
@keyframes underline {
  from {
    width: 25%;
  }
  to {
    width: 50%;
  }
}
.rec_hotels {
	display:flex;
	justify-content: space-between;
}

.items {
	width: 343rpx;
}
.hotel_img {
	width: 343rpx;
}
.hotel_name {
	width: 343rpx;
	height: 80rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
	line-height: 33rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.bottom_profile {
	width: 343rpx;
	height: 34rpx;
	display:flex;
	position:relative;
	justify-content: space-between;
	align_item:center;
}
.bt_img {
	width: 34rpx;
	height: 34rpx;
	position:absolute; 
}
.bt_text {
	width: 72rpx;
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #888888;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;	
	padding_left:200rpx;
}
.bt_mid_img {
	width: 32rpx;
	height: 32rpx;	
	/* margin_left:500rpx; */
}
.bt_sc_number {
	width: 52rpx;
	height: 34rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #888888;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.recommendations {
  margin-top: 20rpx;
}
.hotel-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.hotel-item {
  width: 48%;
  margin-bottom: 20rpx;
}
.hotel-img {
  width: 100%;
  height: 200rpx;
}
.hotel-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}
.hotel-name {
  font-size: 28rpx;
}
.hotel-price {
  color: #d81e06;
}
</style>
